<script setup lang="ts">
import { ref, watch, computed, onBeforeMount } from 'vue';
import { useCustomizerStore } from '../../../stores/customizer';
import { useFlowStore } from '../../../stores/flow';
import { DotsIcon } from 'vue-tabler-icons';
import LanguageDD from './LanguageDD.vue';
import NotificationDD from './NotificationDD.vue';
import ProfileDD from './ProfileDD.vue';
import Searchbar from './Searchbar.vue';
import RightMobileSidebar from './RightMobileSidebar.vue';
import { useUserStore } from '@/stores/user/user';
import Logo from '../logo/Logo.vue';
import { Icon } from '@iconify/vue';
import ThemeToggler from './ThemeToggler.vue';
const customizer = useCustomizerStore();

const showSearch = ref(false);
const appsdrawer = ref(false);
const priority = ref(customizer.setHorizontalLayout ? 0 : 0);
function searchbox() {
    showSearch.value = !showSearch.value;
}
watch(priority, (newPriority) => {
    priority.value = newPriority;
});

const flow = useFlowStore();

// 积分
const userStore = useUserStore();
const points = computed(() => {
    return userStore.points;
});

//For on Scroll Effect on Header
onBeforeMount(() => {
    window.addEventListener('scroll', handleScroll);
});
const stickyHeader = ref(false);
function handleScroll() {
    if (window.pageYOffset) {
        stickyHeader.value = true;
    } else {
        stickyHeader.value = false;
    }
}
</script>

<template>
    <div class="container">
        <div class="maxWidth">
            <v-app-bar elevation="0" :priority="priority" height="75" id="top" :class="stickyHeader ? 'sticky' : ''">
                <v-btn
                    class="hidden-md-and-down custom-hover-primary"
                    icon
                    variant="text"
                    size="small"
                    @click.stop="customizer.SET_MINI_SIDEBAR(!customizer.mini_sidebar)"
                >
                    <Icon icon="solar:list-bold-duotone" height="24" width="24" />
                </v-btn>
                <v-btn
                    class="hidden-lg-and-up custom-hover-primary"
                    icon
                    variant="text"
                    @click.stop="customizer.SET_SIDEBAR_DRAWER"
                    size="small"
                >
                    <Icon icon="solar:list-bold-duotone" height="24" width="24" />
                </v-btn>

                <div class="hidden-md-and-up me-md-4 me-0">
                    <Searchbar />
                </div>

                <!-- ---------------------------------------------- -->
                <!-- Search part -->
                <!-- ---------------------------------------------- -->

                <!---/Search part -->
                <v-spacer class="hidden-sm-and-down" />

                <div class="hidden-md-and-up w-40">
                    <Logo />
                </div>

                <!-- ---------------------------------------------- -->
                <!---right part -->
                <!-- ---------------------------------------------- -->
                <!-- ---------------------------------------------- -->
                <!-- translate -->
                <!-- ---------------------------------------------- -->
                <div class="hidden-sm-and-down me-sm-4 me-4">
                    <Searchbar />
                </div>
                <div class="me-sm-4 me-0">
                    <ThemeToggler />
                </div>
                <div class="hidden-sm-and-down me-sm-4 me-4">
                    <LanguageDD />
                </div>

                <!-- ---------------------------------------------- -->
                <!-- ShoppingCart -->
                <!-- ---------------------------------------------- -->
                <!-- <div class="hidden-sm-and-down me-sm-4 me-4">
                    <v-btn icon variant="text" to="/ecommerce/checkout" class="custom-hover-primary" size="small">
                        <v-badge color="primary" :content="99" offset-x="-4" offset-y="-6">
                            <Icon icon="solar:cart-3-line-duotone" height="24" width="24" />
                        </v-badge>
                    </v-btn>
                </div> -->
                <!-- ---------------------------------------------- -->
                <!-- Notification -->
                <!-- ---------------------------------------------- -->
                <div class="hidden-sm-and-down me-sm-4 me-4">
                    <NotificationDD />
                </div>

                <!-- 流量 -->
                <div class="hidden-sm-and-down me-sm-4 me-4" @click="flow.SET_CUSTOMIZER_DRAWER(!flow.flow_drawer)">
                    <v-avatar start size="25" class="custom-hover-primary">
                        <Icon class="cursor-pointer" color="#0085db" icon="tabler:brand-tinder-filled" height="24" width="24" />
                    </v-avatar>
                </div>

                <!-- 积分 -->
                <div class="hidden-sm-and-down me-sm-4 me-4">
                    <v-chip variant="outlined" color="primary" class="text-body-2">
                        <v-avatar start size="25">
                            <!-- <img src="@/assets/images/profile/user-1.jpg" width="25" /> -->
                            <Icon icon="bitcoin-icons:bitcoin-circle-filled" height="24" width="24" />
                        </v-avatar>
                        <strong>{{ points }}</strong>
                    </v-chip>
                </div>

                <!-- ---------------------------------------------- -->
                <!-- User Profile -->
                <!-- ---------------------------------------------- -->
                <div class="hidden-sm-and-down">
                    <ProfileDD />
                </div>

                <!-----Mobile header------>
                <v-menu :close-on-content-click="false" class="mobile_popup">
                    <template v-slot:activator="{ props }">
                        <v-btn icon class="hidden-md-and-up custom-hover-primary" flat v-bind="props" size="small">
                            <DotsIcon stroke-width="2" size="24" class="text-primary" />
                        </v-btn>
                    </template>

                    <v-sheet rounded="lg" elevation="10" class="mt-5 dropdown-box px-4 py-6">
                        <div class="d-flex justify-space-between align-center">
                            <LanguageDD />
                            <v-btn icon variant="text" class="mr-sm-3 mr-2 custom-hover-primary" to="/ecommerce/checkout" size="small">
                                <v-badge color="primary" :content="99" offset-x="-4" offset-y="-6">
                                    <Icon icon="solar:cart-3-line-duotone" height="24" width="24" />
                                </v-badge>
                            </v-btn>
                            <!-- <MessagesDD /> -->
                            <NotificationDD />
                            <ProfileDD />
                        </div>
                    </v-sheet>
                </v-menu>
            </v-app-bar>
        </div>
    </div>
</template>
